<template>
	<view class="cont">
		<view class="u-flex u-p-24 u-tips-color">
			商机信息标题：
		</view>
		<view class="u-p-l-24 u-p-r-24">
			<view class="bg-white u-p-24 radius12">
				购买【供暖400㎡+4立方】采购一台采购一台采购一台采购一台采购一台
			</view>
		</view>
		<view class="u-flex u-p-24 u-tips-color u-m-t-24 u-flex u-row-between">
			<text>退款条件说明：</text>
			<view @click="openPage('/pages/businessTools/complainMore')">
				查看更多<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>
		<view class="u-p-l-24 u-p-r-24">
			<view class="bg-white u-p-24 radius12 text-error text-bold">
				申诉退款提交24小时内，如无客服回复处理，系统将直接退款到您账户。
			</view>
		</view>
		<view class="text u-p-24 u-tips-color u-m-t-24">
			申诉退款原因（<text class="text-error">请明确描述与客户沟通的结果</text>）：
		</view>
		<view class="u-p-l-24 u-p-r-24 relative">
			<u-input 
				v-model="remark" 
				:border="true"
				:clearable="false"
				class="bg-white u-p-b-70"
				type="textarea" 
				maxlength="200"
				height="200"
				placeholder="请明确描述申诉退款原因,与客户沟通的结果"/>
			<text class="remark-tip u-tips-color">{{remark.length}}/200</text>
		</view>
		<view class="u-p-24 u-m-t-20">
			<view class="bg-white radius12">
				<view class="u-p-24">
					<text class="u-tips-color">联系方式：</text><text class="u-m-l-30">13222222222</text>
				</view>
				<view class="u-border-top u-p-24">
					<view class="u-p-b-24">上传通话录音</view>
					<view class="upload u-border u-flex u-col-center u-row-center">
						<u-icon name="plus" color="#999" size="60"></u-icon>
					</view>
				</view>
				<view class="u-border-top u-p-24">
					<view class="u-p-b-24">上传通话记录截屏</view>
					<u-upload 
						action="#" 
						width="170"
						height="170"
						:file-list="fileList"
						:before-upload="beforeUpload"></u-upload>
				</view>
			</view>
		</view>
		
		<view class="fixed">
			<u-button type="success">确定</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			
			remark: '',
			
			btnStyle: {
				width: '30%',
				fontSize: '28rpx',
				marginLeft: 0,
				marginRight: '20rpx',
				marginBottom: '20rpx',
				// borderRadius: '4rpx',
			},
			
			fileList: []
		}
	},
	onLoad(query) {
	},
	methods: {
		beforeUpload() {},
		openPage(url) {
			this.$common.openPage(url)
		}
	}
}
</script>

<style lang="scss" scoped>
.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
.remark-tip {
	position: absolute;
	bottom: 40rpx;
	right: 50rpx;
}
.fixed {
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
	position: fixed;
	left: 24rpx;
	right: 24rpx;
	bottom: 0;
	z-index: 99;
}
.upload {
	width: 170rpx;
	height: 170rpx;
}
</style>
